@charset "utf-8";
/* CSS Document */

/* 边距、补白和边界宽度都设置为0，当有溢出的时候设置为自动*/
body {
	margin:0;
	border:0;             
	padding:0;
	font-family:arial, verdana, sans-serif;
	overflow:auto;
	background:#e9e4ce;
	line-height: 1.7em;
}
/*margin-top:-45px的用意是：因为图片是经过ps处理过的，其羽化太多，故使其向上平移45个像素。
position:relative的用意是：便于容器内部的绝对定位*/
.content {
	width:1280px;
	height:800px;
	background:url(../images/background2.jpg) no-repeat;
	margin:0 auto;
	margin-top:-45px;
	position:relative;
}
.bulletin_left {
	background:url(../images/bulletin_pic_2.png) no-repeat;
	width:910px;
	height:609px;
	margin-left:40px;
	margin-top:-38px;
	position:absolute;
}
.bulletin_right {
	position:absolute;
	width:265px;
	height:580px;
	right:70px;
	top:95px;
	background:url(../images/bulletin_pic_1.png) no-repeat;
}
.navigation {
	width:630px;
	height:100px;
	padding-top:75px;
}
.nav {
	margin-left:10px;
	height:96px;
	width:620px;
	background:url(../images/button_base.png) no-repeat bottom;
}

/*下面我用到的是float：right而不是left，为的是更好的控制li的排列*/
.nav a,.nav_name li {
	margin-right:15px;
	float:right;
	width:86px;
	height:86px;
}
/*a:hover是伪类，当鼠标停留或者经过nav的时候，图片移到有色图案。因为鼠标经过能够点亮的那几张图片，我用的是两张一样的图片合成的
86*86的图片我合成为172*86的左亮右黑白的图片，把这个图片作为背景放置在86*86的容器内，鼠标没有经过时显示的是黑白的，当鼠标经过的时候，
利用background—position这个属性使背景向左平移86px，从而达到目的*/
.nav a:hover,.nav a:active { background-position:0 0;}
.link { background:url(../images/link_2p.png) -86px 0;}
.album { background:url(../images/album_2p.png) -86px 0; }
.bulletin { background:url(../images/bulletin_2p.png) }
.bbs { background:url(../images/chat_2p.png) -86px 0; }
.contact { background:url(../images/contact_2p.png) -86px 0; }
.home { background:url(../images/home_2p.png) -86px 0; }
/*没有把nav和nav_name合并到一起的原因是，我们想当鼠标经过图片时，他们所对应的名字将会同时出现，这就要求把而这分开放置*/
.nav_name {
	margin-left:-25px;
	height:37px;
	width:660px;
}
.nav_name li {
	list-style:none;
	text-align:center;
}
.nav_name img { display:none;}
/******************************************实现右上方的两个小标签***********************************/
#our_label{
	width:232px;
	position:fixed;
	margin:0;
	padding:0;
	top:0;
	right:100px;
	list-style: none;
    z-index:999999;
}
/*其属性设置为fixe，他将会跟着滚动条一起运动*/
#our_label li {
    width: 108px;
    display:inline;
    float:left;    
}
#our_label a {
	width:116px;
	height:120px;
	display: block;
    float:none;
	text-decoration:none;
	text-align:center;
}
/*display设置为block可以使鼠标经过那一块的时候，都会有链接*/
.about_us a{background:url(../images/about_us.png) no-repeat;}
.contact_us a{background:url(../images/contact_us.png) no-repeat;}
/******************************************实现右上方的两个小标签***********************************/
*, * focus {
	outline: none;
	margin: 0;
	padding: 0;
}
.container {
	width: 230px;
	position:absolute;
	top:20px;
	right:18px;
}
h2.acc_trigger {
	background: url(../images/h2_trigger_a.gif) no-repeat;
	height: 24px;	
	line-height: 24px;
	width: 230px;
	font-size: 18px;
	font-weight: normal;
	text-align:center;
	margin-bottom:1px;
}
h2.acc_trigger a {
	color: #fff;
	text-decoration: none;
	display: block;
}
h2.acc_trigger a:hover {
	color: #ccc;
}
h2.active {background-position: left bottom;}
.acc_container {
	margin-left:4px;
	overflow:scroll;
	font-size:14px;;
	width: 220px;
	clear: both;
	background: #f0f0f0;
	border: 2px solid #d6d6d6;
}
.container ul li { 
	float:left;
	width:220px;
	height:24px;
	overflow:hidden;
	margin-bottom:6px;
}
.homework {
	float:right;
	margin-right:280px;
	margin-top:135px;
	width:200px;
	padding:5px;
	background:#FFC;
	border:5px solid #FC6;
}
.homework span {
	text-indent:1.3em;
	color:#333;
}
/*********************************bulletin.right*********************************************************/
/*--祝融其--*/
.main_view {
	float: left;
	position: relative;
	margin-top:180px;
	margin-left:45px;
}
/*--Window/Masking样式--*/
.window {
	height:226px;	width: 350px;
	overflow: hidden; /*--隐藏在框之外的所有图片--*/
	position: relative;
	border:1px solid #000;
}
.image_reel {
	position: absolute;
	top: 0; left: 0;
}
.image_reel img {
	float: left;
	border:none;
}
/*--翻页样式--*/
.paging {
	position: absolute;
	bottom: 6px; right: -7px;
	width: 178px; height:47px;
	z-index: 100; /*--使翻页栏位于最上层--*/
	text-align: center;
	line-height: 40px;
	background: url(../images/paging_bg2.png) no-repeat;
	display: none; /*--默认隐藏--*/
}
.paging a {
	padding: 5px;
	text-decoration: none;
	color: #fff;
}
.paging a.active {
	font-weight: bold; 
	background: #920000; 
	border: 1px solid #610000;
	
}
.paging a:hover {font-weight: bold;}
